<template>
    <div>
        <div class="yearVIP">
            商品<span>每日听书年费VIP</span>
        </div>
        <div class="totalPrice">
            总价<span>￥{{vipPrice}}</span>
        </div>
        <div class="yearVIP">
            选择支付方式
        </div>
        <div class="pay">
            <div class="weChatpay">
                <img src="@/assets/images/wechat-icon.png" alt="">
            </div> 
             微信支付
             <span class="radio" @click="payMoney('wx')" :class="{'checked': payWay === 'wx'}">
             </span>
        </div>
        <div class="pay moneypay">
           <div class="weChatpay">
                <img src="@/assets/images/icon_me_invite_logo.png" alt="">
            </div>
            <div class="balance">
             余额支付<br/><span>余额：{{funds}}元</span>
            </div>
             <span class="radio" @click="payMoney('balance')" :class="{'checked': payWay === 'balance'}">
             </span>
        </div>
        <div class="clause">
            <span></span>您开通VIP服务后，即在接下来的服务周期（365天）内享受VIP特权。
        </div>
        <div class="clause">
            <span></span>VIP状态到期时，需要您重新购买方可再次开通。
        </div>
        <div class="clause">
            <span></span>VIP服务自行开通成功后不支持退款，敬请谅解。
        </div>
        <div class="clause">
            <span></span>开通会员后，您可在【每日听书】小程序或【懂行】APP中，邀请您的好友成为“懂行-每日听书年度VIP”。
        </div>
        <div class="clause">
            <span></span>每邀请成功一名好友，您可获得{{onekb}}元的现金红包奖励。
        </div>
        <div class="clause">
            <span></span>您的好友也可邀请ta的好友购买“懂行-每日听书年度VIP”，邀请成功后，您的好友可获得{{onekb}}元的现金红包奖励，同时，您可获得{{twokb}}元的现金红包奖励。
        </div>
        <div class="clause">
            <span></span>获得的现金红包奖励，可在【懂行】APP中，“个人中心”-“个人账户管理”中进行提现操作，也可用于消费“懂行”中的全部项目。
        </div>
        <div class='paynow' @click='payCommit'>
            立即付款
        </div>
        
    </div>
</template>
<script>
import { userAccount, balancePay, buyBookPay, cardShareReward } from "@/utils/api.js";
import { Toast } from 'mint-ui';
import {weiXinPay} from '@/utils/wxPay'
import { MessageBox } from 'mint-ui';
import {config} from '@/config'

export default {
    data() {
        return{
            funds: '',
            payStatus: true,
            payParams: {},
            vipPrice: config.vipPrice,
            onekb: config.onekb,
            twokb: config.twokb,
            payWay: 'wx' // wx balance
        }
    },
    created() {
        const data = {
            uid: this.$router.currentRoute.query.uid
        }
        userAccount({data}).then((res) => {
            this.funds = res.data.result.allFunds
        })
    },
    methods:{
        payMoney(val) {
            if (val === 'wx'){
                this.payWay = val
            } else if(val === 'balance'){
                if(this.funds * 1 < this.vipPrice * 1) {
                    Toast({
                        message: '您的账户余额不足，请选择其他支付方式',
                        duration: 2000
                    })
                } else this.payWay = val
                
            }
        },
        payCommit() {
            if (!this.payStatus) return
            this.payStatus = false
            if(localStorage.shareUid) {
                const data = {
                    uid: this.$route.query.uid,
                    price: this.vipPrice * 1 * 100,
                    shareUid: localStorage.shareUid
                }
                cardShareReward({data}).then((response) => {
                    this.payStatus = true 
                    if (response.data.code === '-1') {
                        return
                    } else {
                        this.goPay()
                    }
                })
            } else {
                this.goPay()
            }
           
        },
        goPay() {
            if (this.payWay === 'wx') {
                weiXinPay({
                    uid: this.$route.query.uid,
                    payType: 1,
                    orderType: 2,
                    type: 2,
                    agentId: localStorage.agentId || '',
                    amount: this.vipPrice * 1 * 100,
                    itemId: this.$route.query.pid || 1,
                    openId: localStorage.openid
                }, () => this.paySuccess(), () => this.payCancel())
            } else if (this.payWay === 'balance') {
                const data = {
                    id: 1,
                    uid: this.$route.query.uid,
                    price: this.vipPrice * 1,
                    agentId: localStorage.agentId || '',
                    orderType: 9
                }
                buyBookPay({data}).then((res) => {
                    if(res.data.code === '0') {
                        this.paySuccess()
                    } else {
                        Toast({
                            message: res.data.message,
                            duration: 1000
                        })
                    }
                })
            }
        },
        payCancel() {
            this.payStatus = true
        },
        paySuccess() {
            if(localStorage.shareUid) {
                let href = `${window.location.origin}/#/openVIP?uid=${this.$route.query.uid}`
                window.location.href = href
            } else {
                let href = `${window.location.origin}/#/openVIP?uid=${this.$route.query.uid}`
                window.location.href = href
            }  
            
        },
    },
}
</script>
<style lang="scss" scoped>
.yearVIP, .totalPrice{
    height: 0.8rem;
    border-bottom: 0.01rem solid #e8e8e8;
    font-size: 0.3rem;
    line-height: 0.8rem;
    padding: 0 0.3rem;
    font-family:PingFang-SC-Bold;
    span{
        display: block;
        float: right;
        font-family:PingFang-SC-Bold;
    }
}
.totalPrice span{
    color: #fe2d42;
}
.totalPrice{
    border-bottom: 0.16rem solid #efefef;
}
.pay{
    height: 0.6rem;
    padding: 0.3rem;
    font-size: 0.3rem;
    line-height: 0.6rem;
    border-bottom: 0.01rem solid #e8e8e8;
}
.pay .weChatpay{
    width: 0.6rem;
    height: 0.6rem;
    font-family:PingFang-SC-Bold;
    float: left;
    margin-right: 0.3rem;
    img{
        width: 100%;
        height: 100%;
    }
}
.moneypay{
    line-height: 0.3rem;
    margin-bottom: 0.3rem; 
}
.pay .balance{
    float: left;
    font-family:PingFang-SC-Bold;
    span{
        font-size: 0.24rem;
        color: #0b0b0b;
    }
}
.radio{
    display: block;
    width: 0.3rem;
    height: 0.3rem;
    margin-top: 0.15rem;
    float: right;
    border: 1px solid #d9d9d9;
    border-radius: 50%;
}
.checked{
    background: url('../../assets/images/check-icon.png') no-repeat;
    background-color: #f10303; 
    background-size: 100% 100%;
}
.clause{
    font-size: 0.26rem;
    line-height: 0.42rem;
    padding: 0 0.3rem;
    text-indent: 0.1rem;
    color: #707070;
    span{
        display: block;
        width: 0;
        height: 0;
        border-radius: 1rem;
        float: left;
        border: 0.11rem solid #707070;
        margin-top: 0.1rem;
    }
}
.paynow{
    margin: 0.8rem 0.3rem 0.9rem;
    height: 0.8rem;
    text-align: center;
    font-size: 0.3rem;
    background: #e81f18;
    color: #fff;
    line-height: 0.8rem;
    border-radius: 0.08rem;
}
</style>

